<template>
    <div>
        <crumbs></crumbs>
        <h1>期中考试信息录入</h1>
        <div style="margin: 20px;"></div>
        <el-form label-width="50px" class="label">
            <el-row>
                <el-col :span="9" :offset="1">
                    <el-form-item label="学号">
                        <el-input v-model="stu_id" class="input"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="3">
                    <el-form-item label="姓名">
                        <el-input v-model="stu_name"  class="input"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9" :offset="1">
                    <el-form-item label="语文">
                        <el-input-number v-model="chinese" @change="handleChange" :min="0" :max="150"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="3">
                    <el-form-item label="数学">
                        <el-input-number v-model="math" @change="handleChange" :min="0" :max="150"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9" :offset="1">
                    <el-form-item label="英语">
                        <el-input-number v-model="english" @change="handleChange" :min="0" :max="150"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="3">
                    <el-form-item label="理综">
                        <el-input-number v-model="lizong" @change="handleChange" :min="0" :max="300"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="9" :offset="1">
                    <el-form-item label="文综">
                        <el-input-number v-model="wenzong" @change="handleChange" :min="0" :max="300"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-button type="primary" :plain="true" @click="submit" class="btn">提交成绩</el-button>
    </div>
</template>

<script>
import {mid_info} from '@/utils/examination.js';
import { Message } from 'element-ui';
export default {
    data(){
        return{
            stu_id:'',
            stu_name:'',
            chinese:0,
            math:0,
            english:0,
            lizong:0,
            wenzong:0,
        }
    },
    methods:{
        async submit(){
            if(this.stu_id == '' && this.stu_name == '' && this.chinese == '' && this.math == '' && this.english == '' && this.lizong == '' && this.wenzong == '' ){
                this.open();
            }else{
                let params = {
                    stu_id:this.stu_id,
                    stu_name:this.stu_name,
                    chinese:this.chinese,
                    math:this.math,
                    english:this.english,
                    lizong:this.lizong,
                    wenzong:this.wenzong,
                }
                let result = await mid_info({
                    method:'post',
                    url:'/mid_exam',
                    params,
                    headerType:'form'
                });
                console.log(result);
                this.open2();
                this.stu_id = '';
                this.stu_name = '';
                this.chinese = '';
                this.math = '';
                this.english = '';
                this.lizong = '';
                this.wenzong = ''
            }
        },
        open2(){
            Message({
                message:'提交成功！',
                type:'success',
            });
        },
        open4(){
            Message.error('请填写完整！');
        },
        handleChange(value){
            console.log(value);
        }
    }
}
</script>

<style scoped>
.input{
    width: 300px;
}
h1{
    font-size:20px;
}
.label{
    width: 100%;
}
.btn{
    width: 300px;
}
</style>